<template>
    <div class="jnzx">
        <van-search
            v-model="iptVal"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
        >
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <div class="dropMemu">
            <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item v-model="value" :options="option" />
            </van-dropdown-menu>
            <div class="time">2022-7-19--2022-8-19</div>
        </div>
        <van-tabs v-model:active="active">
            <van-tab title="全部">
                <div class="list">
                    <ul>
                        <li @click="goDetail()">
                            <div class="left">
                                <img
                                    src="@/assets/images/home/item1.png"
                                    alt=""
                                />
                            </div>
                            <div class="right">
                                <div class="txt">
                                    <img
                                        src="@/assets/images/home/tzgg.png"
                                        alt=""
                                    />
                                    <span
                                        >江南镇农业农村局发布关于就业
                                        补贴政策的调整公告</span
                                    >
                                </div>
                                <div class="info">
                                    <div class="time">2021-11-24</div>
                                    <div class="see">
                                        <p>
                                            <img
                                                src="@/assets/images/home/see.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                        <p>
                                            <img
                                                src="@/assets/images/home/colect.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li @click="goDetail()">
                            <div class="left">
                                <img
                                    src="@/assets/images/home/item2.png"
                                    alt=""
                                />
                            </div>
                            <div class="right">
                                <div class="txt">
                                    <img
                                        src="@/assets/images/home/zcfg.png"
                                        alt=""
                                    />
                                    <span
                                        >江南镇农业农村局发布关于就业
                                        补贴政策的调整公告</span
                                    >
                                </div>
                                <div class="info">
                                    <div class="time">2021-11-24</div>
                                    <div class="see">
                                        <p>
                                            <img
                                                src="@/assets/images/home/see.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                        <p>
                                            <img
                                                src="@/assets/images/home/colect.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li @click="goDetail()">
                            <div class="left">
                                <img
                                    src="@/assets/images/home/item3.png"
                                    alt=""
                                />
                            </div>
                            <div class="right">
                                <div class="txt">
                                    <img
                                        src="@/assets/images/home/nqdt.png"
                                        alt=""
                                    />
                                    <span
                                        >江南镇农业农村局发布关于就业
                                        补贴政策的调整公告</span
                                    >
                                </div>
                                <div class="info">
                                    <div class="time">2021-11-24</div>
                                    <div class="see">
                                        <p>
                                            <img
                                                src="@/assets/images/home/see.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                        <p>
                                            <img
                                                src="@/assets/images/home/colect.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li @click="goDetail()">
                            <div class="left">
                                <img
                                    src="@/assets/images/home/item4.png"
                                    alt=""
                                />
                            </div>
                            <div class="right">
                                <div class="txt">
                                    <img
                                        src="@/assets/images/home/cmgs.png"
                                        alt=""
                                    />
                                    <span
                                        >江南镇农业农村局发布关于就业
                                        补贴政策的调整公告</span
                                    >
                                </div>
                                <div class="info">
                                    <div class="time">2021-11-24</div>
                                    <div class="see">
                                        <p>
                                            <img
                                                src="@/assets/images/home/see.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                        <p>
                                            <img
                                                src="@/assets/images/home/colect.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-tab>
            <van-tab title="通知公告">
                <div class="list">
                    <ul>
                        <li @click="goDetail()">
                            <div class="left">
                                <img
                                    src="@/assets/images/home/item1.png"
                                    alt=""
                                />
                            </div>
                            <div class="right">
                                <div class="txt">
                                    <img
                                        src="@/assets/images/home/tzgg.png"
                                        alt=""
                                    />
                                    <span
                                        >江南镇农业农村局发布关于就业
                                        补贴政策的调整公告</span
                                    >
                                </div>
                                <div class="info">
                                    <div class="time">2021-11-24</div>
                                    <div class="see">
                                        <p>
                                            <img
                                                src="@/assets/images/home/see.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                        <p>
                                            <img
                                                src="@/assets/images/home/colect.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-tab>
            <van-tab title="政策法规">
                <div class="list">
                    <ul>
                        <li @click="goDetail()">
                            <div class="left">
                                <img
                                    src="@/assets/images/home/item2.png"
                                    alt=""
                                />
                            </div>
                            <div class="right">
                                <div class="txt">
                                    <img
                                        src="@/assets/images/home/zcfg.png"
                                        alt=""
                                    />
                                    <span
                                        >江南镇农业农村局发布关于就业
                                        补贴政策的调整公告</span
                                    >
                                </div>
                                <div class="info">
                                    <div class="time">2021-11-24</div>
                                    <div class="see">
                                        <p>
                                            <img
                                                src="@/assets/images/home/see.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                        <p>
                                            <img
                                                src="@/assets/images/home/colect.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-tab>
            <van-tab title="农情动态">
                <div class="list">
                    <ul>
                        <li @click="goDetail()">
                            <div class="left">
                                <img
                                    src="@/assets/images/home/item3.png"
                                    alt=""
                                />
                            </div>
                            <div class="right">
                                <div class="txt">
                                    <img
                                        src="@/assets/images/home/nqdt.png"
                                        alt=""
                                    />
                                    <span
                                        >江南镇农业农村局发布关于就业
                                        补贴政策的调整公告</span
                                    >
                                </div>
                                <div class="info">
                                    <div class="time">2021-11-24</div>
                                    <div class="see">
                                        <p>
                                            <img
                                                src="@/assets/images/home/see.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                        <p>
                                            <img
                                                src="@/assets/images/home/colect.png"
                                                alt=""
                                            />
                                            <span>120</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { Search, Toast, DropdownMenu, DropdownItem, Tab, Tabs } from "vant";
import { ref, getCurrentInstance } from "vue";
export default {
    name: "jnzx",
    setup() {
        const iptVal = ref("");
        const onSearch = () => {};
        const onClickButton = () => {};

        const value = ref(0);
        const option = [
            { text: "默认排序", value: 0 },
            { text: "时间最新", value: 1 },
            { text: "收藏最多", value: 2 },
            { text: "浏览最多", value: 3 },
        ];

        const active = ref(0);
        const { proxy } = getCurrentInstance();
        const goDetail = () => {
            proxy.$router.push({
                name: "zxxq",
            });
        };
        return {
            iptVal,
            onSearch,
            onClickButton,
            value,
            option,
            active,
            goDetail,
        };
    },
};
</script>

<style lang="less" scoped>
.jnzx {
    /deep/.van-search {
        background-color: #fff;
        .van-search__content {
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.188);
            border-radius: 20px;
        }
    }
    .dropMemu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 16px;
        .time {
            color: #363a44;
            font-size: 15px;
        }
        /deep/.van-dropdown-menu {
            .van-dropdown-menu__bar {
                box-shadow: none;
                height: 36px;
            }
            .van-dropdown-menu__title {
                border: 1px solid #d7d8da;
                border-radius: 5px;
                width: 106px;
                font-size: 13px;
                font-family: "PingFang-SC-Regular";
                color: #363a44;
            }
            .van-dropdown-menu__title:after {
                right: 5px;
            }
        }
    }
    .list {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        padding: 10px 0;
        ul {
            li {
                width: 343px;
                height: 90px;
                background-color: #ffffff;
                border-radius: 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px;
                box-sizing: border-box;
                margin-bottom: 13px;
                .left {
                    img {
                        width: 92px;
                    }
                    margin-right: 10px;
                }
                .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p {
                        margin: 0;
                    }
                    .txt {
                        span {
                            font-family: "PingFang-SC-Medium";
                            font-size: 12px;
                        }
                        img {
                            width: 56px;
                            vertical-align: middle;
                            margin-right: 3px;
                        }
                        margin-bottom: 16px;
                    }
                    .info {
                        display: flex;
                        justify-content: space-between;
                        font-family: "PingFang-SC-Regular";
                        font-size: 12px;
                        color: #b3b5b9;
                        .see {
                            display: flex;
                            justify-content: space-between;
                            p {
                                img {
                                    width: 13px;
                                    margin-right: 3px;
                                }
                                &:first-of-type {
                                    margin-right: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
